<!DOCTYPE HTML>
<html class="x-admin-sm" lang="en-US" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎</title>
    <th:block th:include="include::header"/>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{/summernote/summernote.css}">
    <script th:src="@{/summernote/summernote.js}"></script>
</head>
<body>

<div class="layui-form-item">
    <input type="hidden" id="id" name="id" th:value="${work.getId()}" required="" lay-verify="">
    <button class="layui-btn" onclick="edit()">提交
    </button>
</div>

<!--实际应用-->
<div id="summernote"></div>


<script th:inline="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#summernote').summernote({
            height: 400,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['insert', ['picture', 'video']]
            ],
            //图片上传
            callbacks: {
                onImageUpload: function (files) {
                    alert("牛了");
                    //上传图片到服务器，使用了formData对象，至于兼容性...据说对低版本IE不太友好
                    var formData = new FormData();
                    formData.append('file', files[0]);
                    $.ajax({
                        url: '/ueditor/html/upload',//后台文件上传接口
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            $('#summernote').summernote('insertImage', data, 'img');
                        }
                    });
                }
            }
        });
        //图片上传
    });

    //初始化富文本
    // $(document).ready(function () {
    //     $('#summernote').summernote();
    // });
    //赋值
    var intro = [[${work.getIntro()}]];
    $('#summernote').summernote('code', intro);

    //发送数据
    function edit() {
        //取值
        console.log($('#summernote').summernote('code'));
        console.log(id.value);
        $.ajax({
            url: "/ueditor/html/edit",
            type: "POST",
            data: {
                id: id.value,
                intro: $('#summernote').summernote('code'),
            },
            success(res) {
                if (res.success) {
                    layer.msg("修改成功", {
                            icon: 6,
                            time: 500
                        },
                        function () {
                            //关闭当前frame
                            xadmin.close();
                        });
                } else {
                    layer.msg(res.msg)
                }
            }
        })
    }
</script>
</body>
</html>
